<template>
  <div class="address-wrapper" style="height: 100%;">
    <!-- <v-header class="header" :opacity="opacity" :fixed="true">
      <div slot="left" class="right" style="top: 2px; left: 10px;" @click.stop="toLasted">
        <img :src="icon.history" width="26px" height="26px" />
      </div>
      <div slot="main" @click.stop="showSearch = true" class="header-seach">
        <img :src="icon.search" width="16px" height="16px" />
        <span>搜索{{currentArea.name}}的景点/酒店</span>
      </div>
      <div slot="right" class="right" style="top: 2px; right: 5px;" @click.stop="toAI">
        <img :src="icon.robot" alt="" width="26px" height="26px" style=" margin-top: -6px;">
      </div>
    </v-header> -->

    <scroll :data="travelsList" style="height: 100%;" ref="scroll" :bounce="false" :probeType="3" :listenScroll="true" @scroll="scroll">
      <div>
<!-- 顶部 -->
        <div class="top" :style="{backgroundImage: 'url('+ currentArea.backgroundImgUrl +')', paddingTop: paddingTop + 'px'}">
          <div style="width: 100%;">
            <div class="line">
              <div class="wrapper">
                <div @click.stop="showSelectAddress = true" class="area-item">
                  <p class="area-weather">
                    <img :src="weather.weatherIcon" width="24px" height="24px" />
                    <!-- <img :src="rain" width="24px" height="24px"/> -->
                    {{weather.temperature}}℃
                  </p>
                  <div class="area-name">
                    <p class="name">{{currentArea.name}}</p>
                    <img :src="icon.more" />
                  </div>
                </div>
              </div>
              <div class="weather">
                <div style="text-align: right">
                  <p>适游指数
                    <span class="num">{{recommendRateCopy}}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="gotoNum" @click.stop="showUserList = true">
          <p>
            <b style="font-size: 18px; color: #333;">{{toUserTotal}}</b>人正在这里旅行</p>
          <div class="right">
            <div v-for="(item, index) in userList" :key="index" v-if="index < 3" class="head" v-lazy:background-image="item.headUrl" @click.stop="toUSerDetail(item.id)"></div>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
          </div>
        </div> -->

<!-- 约小伙伴 -->
        <!-- <div class="box" v-if="futureUserList.length > 0">
          <p class="title" @click="showFutureUser = true">
            <span>约小伙伴</span>
            <span class="intro">未来24小时到这里</span>
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </p>
          <div class="partner">
            <div v-for="(item, index) in futureUserList" :key="index" v-if="index < 8" @click.stop="toUSerDetail(item.id)" class="head" v-lazy:background-image="item.headUrl"></div>
          </div>
        </div> -->
<!-- 地图 -->
        <!-- <div class="box">
          <p class="title">偶遇周边人</p>
          <div class="map" @click="toMap('all')">
            <img style="width:100%; height:170px;" :src="icon.mapBg" alt="">
            <p class="curtain">
              <i>{{scenicCount}}个景点</i>
              <i v-show="hotelShowHidden">{{hotelCount}}个酒店</i>
            </p>
          </div>
        </div> -->
<!-- 美景 -->
        <div class="box">
          <p class="title" @click="mediaPicture">{{shortName}}美景
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </p>
          <ul class="beauty">
            <li v-for="(item, index) in atlas" :key="index" v-if="index < 5" v-lazy:backgroundImage="item" @click.stop="previewAtlas(item, index)"></li>
          </ul>
        </div>
<!-- 视频汇 -->
        <div class="box" v-if="videoList.length > 0">
          <p class="title" @click="mediaVideo">视频汇
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </p>
          <ul class="video">
            <li v-for="item in videoList" :key="item.id" @click.stop="clickVideo(item)">
              <div class="video-thumb" v-lazy:backgroundImage="item.thumbUrl">
                <div class="layer"></div>
                <i class="icon iconfont icon-play"></i>
              </div>
              <p class="video-name">{{item.name}}</p>
            </li>
          </ul>
        </div>
<!-- 全景秀 -->
        <!-- <div class="box" v-if="panoramaList.length > 0">
          <p class="title" @click="mediaEercast">全景秀
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </p>
          <ul class="panorama">
            <li v-for="item in panoramaList" :key="item.id" @click.stop="clickPanorama(item)">
              <div class="panorama-thumb" v-lazy:backgroundImage="item.panoramaThumb">
                <div class="layer"></div>
                <i class="icon iconfont icon-address-720"></i>
              </div>
            </li>
          </ul>
        </div> -->
<!-- 必玩景区 -->
        <div class="box" v-if="scenicList.length > 0">
          <router-link tag="p" class="title" to="/scenicList">必玩景区
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </router-link>
          <ul class="scenic">
            <router-link tag="li" v-for="item in scenicList" :key="item.id" :to="`/scenic/${item.id}`" :class="{'one-scenic': scenicList.length === 1}">
              <div class="scenic-thumb" v-lazy:backgroundImage="item.thumbUrl">
                <p v-if="scenicList.length === 1">{{item.name}}</p>
              </div>
              <p v-if="scenicList.length > 1" class="scenic-name">{{item.name}}</p>
            </router-link>
          </ul>
        </div>
<!-- 推荐酒店 -->
        <div class="box" v-if="hotelList.length > 0">
          <router-link tag="p" class="title" to="/hotelList">推荐酒店
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </router-link>
          <ul class="hotel">
            <router-link tag="li" v-for="item in hotelList" :key="item.id" :to="`/hotel/${item.id}`">
              <div class="hotel-thumb" v-lazy:backgroundImage="item.thumbnailId"></div>
              <p class="hotel-name">{{item.name}}</p>
              <p class="hotel-rate">{{item.commentScore}}分</p>
            </router-link>
          </ul>
        </div>
<!-- 附近美食 -->
        <div class="box" v-if="foodList.length > 0">
          <router-link tag="p" class="title" to="/food">周围美食
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </router-link>
          <ul class="food">
            <router-link tag="li" v-for="item in foodList" :key="item.id" :to="`/foodDetailsOne/${item.id}`">
              <div class="food-thumb" v-lazy:backgroundImage="item.thumbUrl"></div>
              <p class="food-name">{{item.name}}</p>
              <p class="food-desc">{{item.feature}}</p>
            </router-link>
          </ul>
        </div>
<!-- 游玩攻略 -->
        <div class="box" v-if="strategyList.length > 0">
          <p class="title" >{{shortName}}游玩攻略</p>
          <ul class="strategy">
            <router-link tag="li" v-for="item in strategyList" :key="item.id" :to="`/address/strategy/${item.id}`">
              <div class="first-img" v-lazy:backgroundImage="item.firstImg">
                <p>{{item.title}}</p>
              </div>
              <div class="strategy-bottom">
                <p class="left">
                  <i class="icon iconfont icon-brower-count" style="font-size: 13px"/><span class="num" style="margin-right: 16px;">{{item.browseCount}}</span>
                  <i class="icon iconfont icon-collection-b" style="font-size: 11px"/><span class="num">{{item.collectionSum}}</span>
                </p>
                <p class="right">
                  <span>{{item.userName}}</span>
                  <img v-lazy="item.userHeadUrl"/>
                </p>
              </div>
            </router-link>
          </ul>
        </div>
<!-- 游记 -->
        <!-- <div class="box" v-if="travelsList.length > 0">
          <router-link tag="p" class="title" to="/address/travelsList">{{shortName}}游记
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </router-link>
          <ul class="travels">
            <router-link tag="li" v-for="item in travelsList" :key="item.id" class="item" :to="`/address/travels/${item.id}`">
              <div class="left" v-lazy:backgroundImage="item.firstImg"></div>
              <div class="right">
                <p class="travels-title">{{item.title}}</p>
                <div class="bottom">
                  <p class="userinfo">
                    <img class="avatar" v-lazy="item.userHeadUrl" @click.stop="toUSerDetail(item.publishUserId)" />
                    <span class="nickname">{{item.userName}}</span>
                  </p>
                  <p class="number">
                    <span><i class="icon iconfont icon-brower-count" style="font-size: 13px"/>{{item.browseCount}}</span>
                    <span><i class="icon iconfont icon-comment-count" style="font-size: 11px"/>{{item.commentCount}}</span>
                  </p>
                </div>
              </div>
            </router-link>
          </ul>
        </div> -->
      </div>
    </scroll>

<!-- 最近浏览 -->
    <div v-transfer-dom>
      <popup v-model="showLasted" position="left" width="80%" class="popup-wrapper">
        <div v-if="user != null" class="lasted-container" :style="{paddingTop: paddingTop - 30 + 'px'}">
          <div class="top">
            <div>最近浏览</div>
            <p @click.stop="showLasted = false">关闭</p>
          </div>

          <scroll v-if="messageRecord.length > 0 && (messageRecord[0].length > 0 || messageRecord[1].length > 0 || messageRecord[2].length > 0)" :data="messageRecord" class="scroll" v-cloak>
            <!-- 代码有点繁琐，但是方便以后单独修改 -->
            <div style="padding-bottom: 50px;">
              <template v-if="messageRecord[0] && messageRecord[0].length > 0">
                <div class="line">今天</div>
                <div class="item" v-for="item in messageRecord[0]" :key="item.id" @click.stop="clickRecordItem(item.targetId, item.type)">
                  <img class="type" :src="item.type === 5 ? hotelIcon : jingDianIcon" />
                  <div class="content">
                    <p class="title">{{item.name}}</p>
                    <div class="desc">
                      <p class="address">{{item.address}}</p>
                      <p class="price"><span>{{item.rate}}</span>分</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="messageRecord[1] && messageRecord[1].length > 0">
                <div class="line">近三天</div>
                <div class="item" v-for="item in messageRecord[1]" :key="item.id" @click.stop="clickRecordItem(item.targetId, item.type)">
                  <img class="type" :src="item.type === 5 ? hotelIcon : jingDianIcon" />
                  <div class="content">
                    <p class="title">{{item.name}}</p>
                    <div class="desc">
                      <p class="address">{{item.address}}</p>
                      <p class="price"><span>{{item.rate}}</span>分</p>
                    </div>
                  </div>
                </div>
              </template>

              <template v-if="messageRecord[2] && messageRecord[2].length > 0">
                <div class="line">近几天</div>
                <div class="item" v-for="item in messageRecord[2]" :key="item.id" @click.stop="clickRecordItem(item.targetId, item.type)">
                  <img class="type" :src="item.type === 5 ? hotelIcon : jingDianIcon" />
                  <div class="content">
                    <p class="title">{{item.name}}</p>
                    <div class="desc">
                      <p class="address">{{item.address}}</p>
                      <p class="price"><span>{{item.rate}}</span>分</p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </scroll>
          <not-data v-else tip="没有浏览记录哦~" style="margin-top: 100px; font-size: 16px;"></not-data>
        </div>
        <div v-if="user == null" style="margin-top: 210px; text-align: center;" @click.stop="$router.push('/login')">
          <p>亲，您还没登录哦~</p>
          <p>点我登录</p>
        </div>
      </popup>
    </div>

<!-- 搜索 -->
    <global-search v-model="showSearch" type="address" :range="[0, 1, 2, 3, 4, 5, 6]" :searchPlaceholder="'搜索' + currentArea.name + '的景点/酒店'"></global-search>

<!-- 图集 -->
    <div v-transfer-dom>
      <popup v-model="showAtlas" position="bottom" width="100%" height="100%" class="popup-wrapper">
        <div id="address-atlas">
          <v-header ref="atlasHead" :title="currentArea.name + '-图集'" :handleClick="true">
            <div slot="left">
              <x-icon @click.stop="showAtlas = false" type="ios-arrow-left" size="28" style="top: 5px;fill: #fff"></x-icon>
            </div>
          </v-header>
          <div v-if="showAtlas" :data="atlas" :style="{height: atlasScrollHeight + 'px'}" style="margin: 3.5px; overflow-y: scroll;">
            <waterfall wrapperName="address-atlas" :calHeight="true" :gap="7" :imgsArr="atlas" :customWidth="itemWidth" @clickItem="previewAtlas" @scrollLoadImg="scrollLoadImg" :loadingTip="'正在加载' + currentArea.name + '图集...'">
              <p class="atlas-name" slot="content" slot-scope="props">{{props.value.name}}</p>
            </waterfall>
          </div>
          <not-data v-else tip="该地区还没有图集哦~"></not-data>
        </div>
      </popup>
    </div>

    <div v-transfer-dom>
      <previewer :list="atlas" :options="{loop: false}" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
    </div>

<!-- 去过的人列表 -->
    <div v-transfer-dom>
      <popup v-model="showUserList" position="right" width="100%" class="popup-wrapper">
        <div id="address-atlas">
          <v-header :title="'最近去过' + currentArea.name + '的人'" :handleClick="true">
            <div slot="left">
              <x-icon @click="showUserList = false" type="ios-arrow-left" size="28" style="top: 5px;fill: #fff"></x-icon>
            </div>
          </v-header>
          <scroll :style="{height: atlasScrollHeight + 'px'}">
            <ul class="user-list">
              <li class="item" v-for="(item, index) in userList" :key="index" @click="toUSerDetail(item.id)">
                <img class="my-head" :src="item.headUrl" />
                <div style="max-width: 80%;">
                  <p class="nickname">{{item.nickname}} <img class="sex" :src="item.sex == 1 ? icon.male : icon.female" /></p>
                  <p class="signature">{{item.signature || 'Ta很懒，还没写个性签名'}}</p>
                </div>
              </li>
            </ul>
          </scroll>
        </div>
      </popup>
    </div>

<!-- 要去的人列表 -->
    <div v-transfer-dom>
      <popup v-model="showFutureUser" position="right" width="100%" class="popup-wrapper">
        <div id="address-atlas">
          <v-header :title="'即将要去' + currentArea.name + '的人'" :handleClick="true">
            <div slot="left">
              <x-icon @click="showFutureUser = false" type="ios-arrow-left" size="28" style="top: 5px;fill: #fff"></x-icon>
            </div>
          </v-header>
          <scroll :style="{height: atlasScrollHeight + 'px'}">
            <ul class="user-list">
              <li class="item" v-for="(item, index) in futureUserList" :key="index" @click="toUSerDetail(item.id)">
                <img class="my-head" :src="item.headUrl" />
                <div style="max-width: 80%;">
                  <p class="nickname">{{item.nickname}} <img class="sex" :src="item.sex == 1 ? icon.male : icon.female" /></p>
                  <p class="signature">{{item.signature}}</p>
                </div>
              </li>
            </ul>
          </scroll>
        </div>
      </popup>
    </div>

    <address-selector v-model="showSelectAddress" @selectArea="selectArea"></address-selector>

    <keep-alive :include="['StrategyList', 'TravelsList']" :exclude="['Strategy', 'Travels']">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import { TransferDom, Popup } from 'vux'
import Waterfall from '@/components/waterfall/waterfall'
import AddressSelector from '@/components/address-selector/address-selector'
import GlobalSearch from '@/components/global-search/global-search'
import Previewer from '@/components/previewer/previewer'
import notData from '@/components/not-data/not-data'
import TWEEN from '@tweenjs/tween.js'

import icon from '@/assets/json/addressIcon.json'
import defaultAvatar from '@/assets/img/default_avatar.png'
import jingDianIcon from '@/assets/img/icon/jingdian.png'
import hotelIcon from '@/assets/img/icon/jiudian.png'
import handPaintedMapIcon from '@/assets/img/index_button_drawmap@3x.png'

import getWeather from '@/api/getWeather'
import { isIphoneX, isIOS } from '@/assets/js/brower.js'
import axios from '@/api/axiosApi'
import { mapGetters, mapMutations } from 'vuex'
import { QINIU_PREFIX } from '@/api/config'
import { localUser } from '@/assets/js/local'
import { handleBackMixin } from '@/assets/js/mixin'
import weatherData from '@/assets/json/weatherData.json'

export default {
  name: 'Address',
  mixins: [handleBackMixin],
  data() {
    return {
      icon,
      jingDianIcon,
      hotelIcon,
      clickBack: false,
      showLasted: false,
      showSearch: false,
      showAtlas: false,
      showFutureUser: false,
      showUserList: false,
      showSelectAddress: false,
      opacity: 0,
      seachValue: '',
      weather: {
        weather: '多云',
        temperature: 12
      },
      scenicCount: 0,
      hotelCount: 0,
      recommendRate: 30,
      recommendRateCopy: 30,
      user: null,
      toUserTotal: 0, // 去过的人总数
      userList: [], // 去过的人
      futureUserList: [], // 即将要去的人
      searchList: [], // 搜索列表
      atlas: [], // 图集
      videoList: [],  // 视频
      panoramaList: [], // 全景图
      scenicList: [], // 景区
      hotelList: [],  // 酒店
      foodList: [], // 美食
      messageRecord: [[], [], []], // 浏览记录
      travelsList: [],  // 游记
      strategyList: [], // 攻略
      allDisabledBack: true,
      allPopupModels: [
        'showLasted',
        'showSearch',
        'showAtlas',
        'showFutureUser',
        'showUserList',
        'showSelectAddress'
      ],
      areaInfoMapNavigation: '',
      handPaintedMapIcon,
      getHotelShowHidden: this.getHotelShowHidden
    }
  },
  computed: {
    itemWidth() {
      return (window.innerWidth - 21) / 2
    },
    shortName() {
      return this.currentArea && this.currentArea.name && this.currentArea.name.substr(0, 2)
    },
    ...mapGetters(['currentArea', 'hotelShowHidden'])
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Scroll,
    Waterfall,
    Popup,
    Previewer,
    AddressSelector,
    GlobalSearch,
    notData
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingTop = 40 + 34
      this.atlasScrollHeight = window.innerHeight - (40 + 34)
      this.paddingBottom = 24
    } else {
      this.paddingTop = 40 + 24
      this.atlasScrollHeight = window.innerHeight - (40 + 24)
    }
    this.user = localUser.get()

    this.dynamicWidth = (window.innerWidth - 30) / 2 - 10
    this.showSearch = false
    this._getAreaInfo(this.currentArea.id)
  },
  methods: {
    _getAreaInfo(id) {
      this.atlasPageNum = 1
      const _self = this
      axios.get(this, `/v1/addressInfo/${id}`, null, data => {
        _self.setCurrentArea(data)
        this.areaInfoMapNavigation = data.mapNavigation
        getWeather(_self.currentArea.name, params => {
          const icon = weatherData.find(o => o.name === params.weather)
          if (icon) {
            params.weatherIcon = icon.src
          } else {
            params.weatherData = '/static/img/weather/no_weather.png'
          }
          this.weather = params
        })
        _self._getRecommendRate()
        _self._getUserList()
        _self._getFutureUserList()
        _self._getTravelsList()
        _self._getStrategyList()
        _self._getHotelCount()
        _self._getHotelList()
        _self._getScenicCount()
        _self._getScenicList()
        _self._getFoodList()
        _self._getAtlas()
        _self._getVideoList()
        _self._getPanoramaList()
      })
    },
    _getHotelCount() {
      axios.get(this, '/v1/hotelCount', {
        areaId: this.currentArea.id
      }, (data) => {
        this.hotelCount = data
      })
    },
    _getScenicCount() {
      axios.get(this, '/v1/scenicCount', {
        areaId: this.currentArea.id
      }, (data) => {
        this.scenicCount = data
      })
    },
    _getUserList() {
      const _self = this
      axios.get(
        this,
        `/v1/users`,
        {
          areaId: this.currentArea.id,
          startTime: this.moment()
            .subtract(1, 'years')
            .format('YYYY-MM-DD'),
          endTime: this.moment().format('YYYY-MM-DD'),
          pageSize: 20
        },
        (data, total) => {
          data.forEach(item => {
            let tmpHeadUrl = defaultAvatar
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                tmpHeadUrl = item.headUrl + '-bheader'
              } else {
                tmpHeadUrl = item.headUrl
              }
            }
            item.headUrl = tmpHeadUrl
          })
          _self.userList = data
          _self.toUserTotal = total
        },
        null,
        false
      )
    },
    _getFutureUserList() {
      const _self = this
      axios.get(
        this,
        `/v1/users`,
        {
          areaId: this.currentArea.id,
          startTime: this.moment().format('YYYY-MM-DD'),
          endTime: this.moment()
            .add(1, 'days')
            .format('YYYY-MM-DD'),
          pageSize: 20
        },
        data => {
          data.forEach(item => {
            let tmpHeadUrl = defaultAvatar
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                tmpHeadUrl = item.headUrl + '-bheader'
              } else {
                tmpHeadUrl = item.headUrl
              }
            }
            item.headUrl = tmpHeadUrl
          })
          _self.futureUserList = data
        },
        null,
        false
      )
    },
    _getRecommendRate() {
      axios.get(
        this,
        `/v1/travelScore/${this.currentArea.id}`,
        null,
        data => {
          this.recommendRate = data
        },
        null,
        false
      )
    },
    _getAtlas() {
      if (this.requestAtlas) {
        return
      }
      this.requestAtlas = true
      axios.get(
        this,
        `/v1/atlasAndProduct`,
        {
          type: 1,
          pageSize: 3,
          numOfProduct: 8,
          pageNum: this.atlasPageNum,
          areaId: this.currentArea.id
        },
        data => {
          this.requestAtlas = false
          if (data.length === 0) {
            if (this.atlasPageNum > 1) this.$vux.toast.text('没有更多数据了', 'middle')
            return
          }
          let tmp = []
          data.forEach(item => {
            if (item && item !== '') {
              const imgs = item.atlas.split(';')
              imgs.forEach(img => {
                if (img.indexOf(QINIU_PREFIX) > -1) {
                  img = img + '-w200'
                }
                tmp.push({
                  src: img,
                  name: item.name
                })
              })
            }
          })
          if (this.atlasPageNum > 1) {
            this.atlas = this.atlas.concat(tmp)
          } else {
            this.atlas = tmp
          }
        },
        () => {
          this.requestAtlas = false
        }
      )
    },
    _getVideoList() {
      axios.get(this, `/v1/scenicFacilities`, {
        areaId: this.currentArea.id,
        pageSize: 2
      }, (data) => {
        this.videoList = data
      }, null, false)
    },
    _getPanoramaList () {
      axios.get(this, `/v1/panorama`, {
        areaId: this.currentArea.id,
        pageSize: 1
      }, (data) => {
        this.panoramaList = data
      })
    },
    _getMessageRecord() {
      const userId = localUser.get('id')
      if (userId == null || userId === '') {
        return
      }
      axios.get(
        this,
        `/v1/messageRecords/${userId}`,
        {
          type: 0,
          startTime: this.moment()
            .subtract(7, 'days')
            .format('YYYY-MM-DD'),
          pageSize: 50
        },
        data => {
          console.log(data)
          let today = []
          let nearlyThree = []
          let lastDays = []
          data.forEach(item => {
            console.log(this.moment(item.updateAt).isAfter(
                this.moment()
                  .subtract(3, 'days')
                  .format('YYYY-MM-DD')
              ))
            if (
              this.moment(item.updateAt).format('YYYY-MM-DD') ===
              this.moment().format('YYYY-MM-DD')
            ) {
              today.push(item)
            } else if (
              this.moment(item.updateAt).isAfter(
                this.moment()
                  .subtract(3, 'days')
                  .format('YYYY-MM-DD')
              )
            ) {
              nearlyThree.push(item)
            } else {
              lastDays.push(item)
            }
          })
          this.messageRecord = [today, nearlyThree, lastDays]
        }
      )
    },
    _getTravelsList() {
      axios.get(
        this,
        '/v1/playStrategy',
        {
          publishAddressId: this.currentArea.id,
          pageSize: 10,
          articleType: 0
        },
        data => {
          data.forEach(item => {
            if (item.userHeadUrl) {
              if (item.userHeadUrl.indexOf(QINIU_PREFIX) > -1) {
                item.userHeadUrl += '-bheader'
              }
            } else {
              item.userHeadUrl = defaultAvatar
            }
          })
          this.travelsList = data
        },
        null,
        false
      )
    },
    _getStrategyList() {
      axios.get(
        this,
        '/v1/playStrategy',
        {
          publishAddressId: this.currentArea.id,
          pageSize: 1,
          articleType: 1
        },
        data => {
          data.forEach(item => {
            if (item.userHeadUrl) {
              if (item.userHeadUrl.indexOf(QINIU_PREFIX) > -1) {
                item.userHeadUrl += '-bheader'
              }
            } else {
              item.userHeadUrl = defaultAvatar
            }
          })
          this.strategyList = data
        },
        null,
        false
      )
    },
    _getScenicList() {
      axios.get(this, '/v1/recommendScenic', {
        areaId: this.currentArea.id,
        pageSize: 4
      }, (data) => {
        this.scenicList = data
      }, null, false)
    },
    _getHotelList() {
      axios.get(this, '/v1/recommendHotel', {
        areaId: this.currentArea.id,
        pageSize: 3
      }, (data) => {
        this.hotelList = data
      }, null, false)
    },
    _getFoodList() {
      axios.get(this, '/v1/storeFood', {
        recommend: 0,
        areaId: this.currentArea.id,
        pageSize: 3
      }, (data) => {
        this.foodList = data
      }, null, false)
    },
    scroll(position, movingY) {
      if (position.y <= -160) {
        this.opacity = 1
      } else {
        this.opacity = Math.abs(position.y / 160)
      }
    },
    toMap(type) {
      this.$router.push({
        path: `/addressMap/${this.currentArea.id}/${type}`,
        query: {
          notShowNumber: true
        }
      })
    },
    toAI() {
      this.$router.push('/chatAI')
    },
    scrollLoadImg() {
      this.atlasPageNum++
      this._getAtlas()
    },
    mediaPicture() {
      this.showAtlas = true
      this.atlasPageNum = 1
    },
    mediaEercast() {
      this.$router.push({
        path: '/home/panoramaSet/1',
        query: {
          areaId: this.currentArea.id
        }
      })
    },
    mediaVideo() {
      this.$router.push({
        path: '/home/videoSet/1',
        query: {
          areaId: this.currentArea.id
        }
      })
    },
    toPlayStrategy() {
      this.$router.push('/address/travelsList')
    },
    submitSearch(value) {
      axios.get(
        this,
        `/v1/product`,
        {
          name: value,
          type: this.currentArea.type,
          pageSize: 10
        },
        data => {
          this.searchList = data
        }
      )
    },
    clickRecordItem(id, type) {
      // TODO
      this.showLasted = false
    },
    toUSerDetail(userId) {
      this.$router.push(`/user/archives/${userId}`)
    },
    toLasted() {
      this.showLasted = true
      this._getMessageRecord()
    },
    toContent() {
      this.$router.push(
        `/content/${this.currentArea.contentId}/${'本地概况-' +
          this.currentArea.name}`
      )
    },
    selectArea(area) {
      this.setCurrentArea(area)
      this.showSelectAddress = false
      this._getAreaInfo(this.currentArea.id)
    },
    picRideoAll() {
      this.$vux.toast.text('这里是图片/全景图/视频~', 'middle')
    },
    preImgLoaded() {
      this.$vux.loading.hide()
    },
    previewAtlas(item, index) {
      // 预览图片
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      let temp = []
      this.atlas.forEach((img, i) => {
        temp.push({
          src: img
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    goToIframe() {
      if (this.areaInfoMapNavigation) {
        this.$router.push({
          path: '/iframe',
          query: {
            address: this.currentArea.name,
            src: this.areaInfoMapNavigation
          }
        })
      } else {
        this.$vux.toast.text('暂无当地手绘地图数据~', 'middle')
      }
    },
    clickVideo(video) {
      this.$router.push({
        path: `/home/homeContentManagement/${video.publicityId}`,
        query: {
          title: video.name
        }
      })
    },
    clickPanorama(panorama) {
      if (isIOS()) {
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'showVRPanorama', 'panoramaUrl': panorama.panorama})
      } else {
        window.android.showVRPanorama(panorama.panorama)
      }
    },
    ...mapMutations({
      setCurrentArea: 'SET_CURRENT_AREA'
    })
  },
  watch: {
    recommendRate(newValue, oldValue) {
      var vm = this
      function animate() {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }
      const tmp = { tweeningNumber: oldValue }
      new TWEEN.Tween(tmp)
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ tweeningNumber: newValue }, 1800)
        .onUpdate(function() {
          vm.recommendRateCopy = tmp.tweeningNumber.toFixed(2)
        })
        .start()
      animate()
    }
  }
}
</script>

<style scoped  lang="stylus" rel="stylesheet/stylus">
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

[v-cloak]
  display none
.atlas-name
  background-image url('../../assets/img/mask.png')
  background-size cover
  no-wrap()
  font-size 13px
  color #fff
  padding 0 8px
  height 50px
  line-height 72px
  position absolute
  bottom 0
  left 0
  right 0
// 公共样式
.box
  padding 20px 15px
  background #fff
  margin-top $margin-bottom-module
  &:last-child
    margin-bottom 0
.title
  position relative
  font-size $font-size-large
  color $color-text-1
  margin-bottom 15px
  font-weight 900
  no-wrap()
  .intro
    font-size 13px
    color $color-text-4
    padding-left 12px
    margin-left 9px
    border-left 1px solid $color-divider
    font-weight normal
  .more
    float right
    font-size 13px
    color $color-text-4
    padding-top 4px
    font-weight normal
    i
      margin-left 4px
.address-wrapper
  background $color-background
  .header
    display flex
    align-items center
    .header-seach
      background $color-layer-1
      color $color-text-5
      height 30px
      line-height 30px
      font-size 15px
      width 100%
      border-radius 30px
      img
        transform translateY(4px)
        padding-right 10px
    .right
      line-height 1
      i
        font-size 27px
  .title-wrapper
    position relative
    display flex
    justify-content space-between
    align-items center
    font-size $font-size-large
    color $color-text-1
    font-weight 900
    line-height 1
    no-wrap()
    padding 20px 16px 16px 16px
    .right
      float right
      font-size 13px
      color $color-text-4
      padding-top 4px
      font-weight normal
  .top
    background-repeat no-repeat
    background-size cover
    height calc(50vw - 40px)
    padding 0 16px
    color #fff
    display flex
    align-items flex-end
    position relative
    .line
      display flex
      margin-bottom 16px
    .wrapper
      line-height 1.2
      color #fff
      .area-item
        line-height 1
        .area-weather
          font-size 12px
          margin-bottom 8px
          img
            transform translateY(6px)
            margin-right 8px
        .area-name
          display flex
          align-items center
          .name
            font-size 32px
          img
            width 28px
            height 28px
            margin 4px 0 0 12px
      span
        font-size $font-size-title
    .weather
      display flex
      align-items flex-end
      font-size $font-size-small
      margin-left 32%
      margin-bottom -3px
      .num
        font-size $font-size-desc
  .gotoNum
    display flex
    justify-content space-between
    font-size $font-size-desc
    height 44px
    line-height 44px
    background #fff
    padding 0 16px
    color #666
    margin-bottom 12px
    .head
      float left
      width 28px
      height 28px
      border-radius 50%
      margin-right 8px
      border 1px solid #fff
      background-repeat no-repeat
      background-size cover
    .right
      display flex
      align-items center
      i
        font-size 24px
  .partner
    overflow hidden
    height 40px
    display flex
    align-items center
    .head
      width 30px
      height 30px
      border-radius 50%
      margin-right 8px
      border 1px solid #fff
      background-repeat no-repeat
      background-size cover
  .map
    height 168px
    position relative
    .curtain
      position absolute
      right 22px
      top 87px
      font-size 12px
      color #666
      background #f4f3ef
      i
        display inline-block
        &:first-child
          margin-right 8px
  .beauty
    li
      float left
      width 40%
      height 82px
      margin-bottom 4px
      background-size cover
      background-position center
      background-repeat no-repeat
      &:first-child, &:nth-child(3)
        width calc(60% - 4px)
        height 125px
        margin-right 4px
      &:nth-child(4)
        margin-top -43px
    &:after
      content ''
      display block
      clear both
  .video
    display flex
    justify-content space-between
    li
      width calc(50% - 4px)
      .video-thumb
        width 100%
        height 105px
        border-radius 3px
        background-size cover
        background-position center
        background-repeat no-repeat
        position relative
        overflow hidden
        .layer
          width 100%
          height 100%
          background rgba(0, 0, 0, 0.3)
        i
          position absolute
          left 50%
          top 50%
          transform translate(-50%, -50%)
          font-size 30px
          color #fff
          padding-left 2px
      .video-name
        color #333
        font-size 15px
        no-wrap()
        margin-top 12px
        line-height 1
  .panorama
    li
      .panorama-thumb
        width 100%
        height 171px
        border-radius 5px
        background-size cover
        background-position center
        background-repeat no-repeat
        position relative
        overflow hidden
        .layer
          width 100%
          height 100%
          background rgba(0, 0, 0, 0.3)
        i
          position absolute
          left 50%
          top 50%
          transform translate(-50%, -50%)
          font-size 50px
          color #fff
          padding-left 2px
  .scenic
    display flex
    justify-content space-between
    flex-wrap wrap
    li
      width calc(50% - 4px)
      &:first-child
        margin-bottom 16px
      .scenic-thumb
        width 100%
        height 105px
        border-radius 3px
        background-size cover
        background-position center
        background-repeat no-repeat
        position relative
      .scenic-name
        color #333
        font-size 15px
        no-wrap()
        margin-top 12px
        line-height 1
    .one-scenic
      width 100%
      &:first-child
        margin-bottom 0
      .scenic-thumb
        height 171px
        border-radius 5px
        p
          text-align center
          width 70%
          color #fff
          font-size 18px
          line-height 1.4
          position absolute
          top 50%
          left 50%
          transform translate(-50%, -50%)
  .hotel
    display flex
    justify-content space-between
    li
      width calc(33.333% - 5.3px)
      .hotel-thumb
        width 100%
        height 82px
        border-radius 3px
        background-size cover
        background-position center
        background-repeat no-repeat
        position relative
      .hotel-name
        color #333
        font-size 15px
        margin-top 12px
        line-height 1
        no-wrap()
      .hotel-rate
        color $color-level
        font-size 15px
        margin-top 8px
        line-height 1
  .food
    display flex
    justify-content space-between
    li
      width calc(33.333% - 5.3px)
      .food-thumb
        width 100%
        height 82px
        border-radius 3px
        background-size cover
        background-position center
        background-repeat no-repeat
        position relative
      .food-name
        color #333
        font-size 15px
        margin-top 12px
        line-height 1
        no-wrap()
      .food-desc
        color #999
        font-size 10px
        margin-top 8px
        line-height 1.3
        no-wrap-n(2)
  .strategy
    li
        border-bottom 0.5px solid #e2e2e2
        &:last-child
          border-bottom none
      .first-img
        height calc(50vw - 15px)
        border-radius 5px
        background-position center
        background-size cover
        background-repeat no-repeat
        position relative
        p
          position absolute
          bottom 0
          left 0
          right 0
          color #ffffff
          font-size 15px
          padding 12px
          no-wrap()
      .strategy-bottom
        display flex
        justify-content space-between
        align-items center
        margin-top 8px
        line-height 1
        .left
          color #666
          font-size 12px
          .num
            margin-left 4px
          .dot
            margin 0 4px
        .right
          display flex
          align-items center
          color #333
          font-size 11px
          img
            display inline-block
            width 28px
            height 28px
            min-width 28px
            border-radius 50%
            margin-left 8px
  .travels
    li
      padding 16px 0
      border-bottom 1px solid rgba(0, 0, 0, 0.1)
      display flex
      justify-content space-between
      &:first-child
        padding-top 0
      &:last-child
        border-bottom none
        padding-bottom 0
      .left
        width 44%
        height 117px
        border-radius 3px
        background-size cover
        background-repeat no-repeat
        background-position center
      .right
        width calc(56% - 12px)
        height 117px
        display flex
        align-content space-between
        flex-wrap wrap
      .travels-title
        font-size 15px
        color #333
        line-height 1.4
        no-wrap-n(2)
        width 100%
      .userinfo
        display flex
        align-content space-between
        height 24px
        margin-bottom 8px
        line-height 24px
      .avatar
        width 24px
        height 24px
        border-radius 50%
        margin-right 4px
      .nickname
        font-size 11px
        color #333
      .bottom
        width 100%
      .number
        color #666
        font-size 11px
        line-height 1
        span
          margin-right 8px
        i
          margin-right 4px
.popup-wrapper
  background #fff
  overflow hidden
  .lasted-container
    background #fff
    padding 12px
    .scroll
      height calc(100vh - 50px)
    .top
      display flex
      justify-content space-between
      font-size $font-size-large
      height 26px
      line-height 26px
      img
        width 26px
        height 26px
        margin-right 7px
      span
        display inline-block
        transform translateY(-6px)
      p
        font-size $font-size-desc
        color $color-theme
        padding 0 6px
    .line
      margin-top 18px
      margin-bottom 12px
      position relative
      &:after
        content ''
        height 1px
        width calc(100% - 55px)
        position absolute
        right 0
        top calc(50% - 1px)
        background $color-border
    .item
      display flex
      align-items center
      margin-bottom 20px
      .type
        width 30px
        height 30px
        margin-right 9px
        font-size $font-size-title
      .content
        width calc(100% - 40px)
        color #3a3a3a
        .title
          font-size $font-size-desc
          margin-bottom 0
          no-wrap()
        .desc
          font-size $font-size-small
          display flex
          justify-content space-between
          margin-top 4px
          .address
            width calc(100% - 80px)
            no-wrap()
          .price
            color $color-level
            span
              margin-right 2px
  .search-list
    padding 15px
    list-style none
    line-height 1.6
    li
      border-bottom 1px solid $color-border
      padding 5px 0
    .name
      font-weight bold
    .feature
      font-size 13px
      color $color-text-dark
      no-wrap()
  .user-list
    list-style none
    line-height 1.6
    .item
      border-bottom 1px solid $color-border
      padding 7px 12px
      display flex
      .my-head
        width 45px
        height 45px
        border-radius 50%
        margin-right 7px
      .sex
        width 18px
        height 18px
      .nickname
        font-weight bold
        font-size 16px
        line-height 1.6
      .signature
        font-size 13px
        color $color-text-dark
        np-wrap()

  .search-list
    padding 15px
    list-style none
    line-height 1.6
    li
      border-bottom 1px solid $color-border
      padding 5px 0
    .name
      font-weight bold
    .feature
      font-size 13px
      color $color-text-dark
      no-wrap()
.gridTimeStyle
  border 1px solid grey
  padding 4px 10px
  border-radius 50px
</style>
